<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <title>Materialize - Documentation</title>

  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
  <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">

  <!-- Android 5 Chrome Color -->
  <meta name="theme-color" content="#EE6E73">

  <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--  <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
<!--  <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
  <link href="../../../css/prism.css" rel="stylesheet" />
</head>

<body>






<nav style="position: fixed; bottom:0; z-index: 100;">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="right">
            <li>
                <a id="test-17" class="dropdown-trigger" href="#!" data-target="17">
                    Hover (upwards)<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-18" style="position: relative;" class="dropdown-trigger" href="#!" data-target="18">
                    Relative Hover (upwards)<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-19" style="position: relative;" class="dropdown-trigger" href="#!" data-target="19">
                    Relative Under Origin (upwards)<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-20" class="dropdown-trigger" href="#!" data-target="20">
                    Long Under Origin (upwards)<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<nav style="position: fixed; top:0; z-index: 100;">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="right">
            <li>
                <a id="test-1" class="dropdown-trigger" href="#!" data-target="1">
                    Hover<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-11" style="position: relative;" class="dropdown-trigger" href="#!" data-target="11">
                    Relative Hover<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-2" style="position: relative;" class="dropdown-trigger" href="#!" data-target="2">
                    Relative Under Origin<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-3" class="dropdown-trigger" href="#!" data-target="3">
                    Long Under Origin<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<nav style="margin-top: 100px;">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="right">
            <li>
                <a class="dropdown-trigger" href="#!" data-target="4" data-hover="true" id="button4">
                    Hover<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a style="position: relative;" class="dropdown-trigger" href="#!" data-target="5" id="button5">
                    Relative<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a class="dropdown-trigger waves-effect" href="#!" data-target="6" id="button6">
                    Overflow Hidden With Waves<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<nav style="margin-top: 50px;">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="right">
            <li>
                <a id="test-7" class="dropdown-trigger" href="#!" data-target="7">
                    No constrainWidth<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a class="dropdown-trigger" href="#!" data-target="8" data-gutter="100" id="button4">
                    Gutter 100<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a style="position: relative;" class="dropdown-trigger" href="#!" data-target="9" data-beloworigin="true" id="button5">
                    Below Origin<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-10" class="dropdown-trigger" href="#!" data-target="10">
                    Right edge detection<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<nav style="margin-top: 50px;">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="left">
            <li>
                <a id="test-14" class="dropdown-trigger" href="#!" data-target="14">
                    Left edge detection<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-15" class="dropdown-trigger" href="#!" data-target="15" data-gutter="100">
                    Gutter 100<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-16" style="position: relative;" class="dropdown-trigger" href="#!" data-target="16">
                    Below Origin<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
            <li>
                <a id="test-22" class="dropdown-trigger" href="#!" data-target="22">
                    Long List Overflow<i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>
<br><br>









<!-- Dropdown Structure -->
<ul id="1" class="dropdown-content">
    <li>
        <a href="#!">Index</a>
    </li>
    <li>
        <a href="#!">Logs</a>
    </li>
    <li>
        <a href="#!">Create Thing</a>
    </li>
    <li>
        <a href="#!">Very Long Menu Item That Should Overflow</a>
    </li>
</ul>
<ul id="2" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
    <li>
        <a href="#!">Invitations</a>
    </li>
</ul>
<ul id="3" class="dropdown-content">
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
</ul>



<!-- end dropdown structure -->


<!-- Dropdown Structure -->
<ul id="4" class="dropdown-content">
    <li>
        <a href="#!">Index</a>
    </li>
    <li>
        <a href="#!">Logs</a>
    </li>
    <li>
        <a href="#!">Create Thing</a>
    </li>
    <li>
        <a href="#!/manage">Very Long Menu Item That Should Overflow</a>
    </li>
</ul>
<ul id="5" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
    <li>
        <a href="#!">Invitations</a>
    </li>
</ul>
<ul id="6" class="dropdown-content">
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
    <li>
        <a href="#!">My profile</a>
    </li>
</ul>


<!-- Options testing -->
<ul id="7" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Is Very Long</a></li>
</ul>
<ul id="8" class="dropdown-content">
    <li>
        <a href="#!">Index</a>
    </li>
    <li>
        <a href="#!">Logs</a>
    </li>
    <li>
        <a href="#!">Create Thing</a>
    </li>
    <li>
        <a href="#!/manage">Very Long Menu Item That Should Overflow</a>
    </li>
</ul>
<ul id="9" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
    <li>
        <a href="#!">Invitations</a>
    </li>
</ul>
<ul id="10" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
    <li>
        <a href="#!/manage">Very Long Menu Item That Should Overflow</a>
    </li>
</ul>
<ul id="11" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
    <li>
        <a href="#!/manage">Very Long Menu Item That Should Overflow</a>
    </li>
</ul>
<ul id="14" class="dropdown-content">
  <li><a href="www.google.com" >Google</a></li>
  <li><a href="www.google.com">Google</a></li>
  <li><a href="www.google.com">Google</a></li>
  <li><a href="#!">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="15" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="16" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>

<ul id="17" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="18" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="19" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="20" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>
<ul id="23" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>


<br>

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal1</a>
<div class="modal modal-fixed-footer" id="modal1">
  <div class="modal-content">
    <p>Modal 1 with original issue</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div style="position: relative;">

      <a id="test-modal" class="btn-floating btn-large waves-effect waves-light red dropdown-trigger" data-target="modal-dropdown">+</a>
      <ul id="modal-dropdown" class="dropdown-content">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
        <li><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
        <li><a href="#">16</a></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#19">19</a></li>
        <li><a href="#20">20</a></li>
      </ul>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

<br><br>

Align left:
<a id="test-12" class="btn-floating btn-large waves-effect waves-light red dropdown-trigger" data-target="12">+</a>
<ul id="12" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
</ul>

<br><br>

Align right: --------------------------------
<a id="test-13" class="btn-floating btn-large waves-effect waves-light red dropdown-trigger" data-target="13">+</a>
<ul id="13" class="dropdown-content">
    <li>
        <a href="#!">Users</a>
    </li>
    <li>
        <a href="#!">Create User</a>
    </li>
    <li>
        <a href="#!">Invite User</a>
    </li>
</ul>



<br>
<div class="row" style="padding-left: 300px;">

    <!-- Dropdown Structure -->
    <ul id="24" class="dropdown-content">
      <li><a href="#!">one</a></li>
      <li><a href="#!">two</a></li>
      <li class="divider"></li>
      <li><a href="#!">three</a></li>
    </ul>
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="right">
          <!-- Dropdown Trigger -->
          <li><a id="test-24" class="dropdown-trigger" href="#!" data-target="24">Dropdown with padding on ancestor</a></li>
        </ul>
      </div>
    </nav>

</div>

<div class="center" style="left: 50px; width: 400px; height: 400px; overflow:scroll; background: grey; position: absolute;">
    <h2 style="width: 700px; height: 200px">Scrolling in absolute container</h2>
    <a id="test-21" style="left: 200px;" class="btn-floating btn-large waves-effect waves-light red dropdown-trigger" data-target="21">+</a>
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
    <br>s
</div>

<ul id="21" class="dropdown-content">
  <li><a href="#!">Index</a></li>
  <li><a href="#!">Logs</a></li>
  <li><a href="#!">Create Thing</a></li>
  <li><a href="#!/manage">Very Long Menu Item That Should Overflow</a></li>
</ul>

<ul id="22" class="dropdown-content">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li><a href="#">16</a></li>
  <li><a href="#">17</a></li>
  <li><a href="#">18</a></li>
  <li><a href="#19">19</a></li>
  <li><a href="#20">20</a></li>
</ul>




<input type="text" class="datepicker">




<p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
























<!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="../../../bin/materialize.js"></script>
<!--     <script src="js/velocity.min.js"></script>-->
<!--  <script src="js/leanModal.js"></script>-->

  <script>
   $(document).ready(function(){
       $('#test-1, #test-11, #test-17, #test-18, #button4').dropdown({hover: true});
       $('#test-2, #test-3, #test-19, #test-20').dropdown({coverTrigger: false, hover: true});
       $('#test-14').dropdown({alignment: 'right', constrainWidth: false});
       $('#test-15, #test-24, #button5, #button6, #test-modal').dropdown();
       $('#test-16, #test-22').dropdown({coverTrigger: false});
       $('#test-12').dropdown({constrainWidth: false, alignment: 'left'});
       $('#test-13, #test-21').dropdown({constrainWidth: false, alignment: 'right'});
       $('#test-7, #test-10').dropdown({constrainWidth: false});
       $('.datepicker').datepicker();
       $('.modal').modal();
   });
  </script>

</body>
</html>
